<template>
	<div class="flowershow">
		<header>花现</header>
		<div id="content">
			<header>今日推荐</header>
			<vueWaterfallEasy :imgsArr="imgsArr" @scrollLoadImg="getData" @click="clickFn" ref="waterfall">
		      <template slot-scope="props">
		        <div class="player_info"> 
		            <div class="ticket">
		            	<p class="p1">{{props.value.text}}</p>
		             	<p class="p2">
		             		<span class="lt s1">{{props.value.smallp}}</span>
		             		<span class="rt s2"><i class="iconfont">&#xe608;</i> {{props.value.num}}</span>
		             	</p>	
		            </div>
		          </div>
		      </template>
		    </vueWaterfallEasy>
		</div>
	</div>
</template>
<style type="text/css" lang="less" scoped>
	.flowershow{
		position: relative;
		height: 100vh;
		width: 100%;
		overflow: auto;
		margin-bottom:50px; 
		>header{
		    text-align: center;
		    background: #fff;
		    color: #000;
		    line-height: 32px;
		    font-size: 16px;
		    letter-spacing: 2px;
		    position: fixed;
		    z-index: 999;
		    width: 100%;
		    border-bottom: 0.3px solid 	#EAEAEA;
		}
		#content{
			position: absolute;
		    top: 32px;
		    bottom: 0;
		    width: 100%;
		    height: 100%;
		    background: #FCFCFC;
			header{
				margin: 10px 0;
				text-align: left;
				font-size: 15px;
				padding-left: 4px;
			}

		  }
		  .p1{
		  	font-size: 14px;
		  	color: #000;
		  	margin:8px 0;
		  	text-align: left;
		  	padding-left: 4px;
		  }
		  .p2{
		  	overflow: hidden;
		  	font-size: 12px;
		  	color:#5C5C5C;
		  	margin:8px 0; 
		  	.s1{
		  		margin-left: 4px;
		  	}
		  	.s2{
		  		margin-right: 4px;
		  		i{
		  			position: relative;
		  			top: -1px;
		  		}
		  	}
		  }
	}
</style>

<script type="text/javascript">
	 import vueWaterfallEasy from 'vue-waterfall-easy'
	export default {
	  name: 'app',
	  data() {
	    return {
	      imgsArr: [],
	      group: 0, // 当前加载的加载图片的次数
	      pullDownDistance: 0
	    }
	  },
	  components: {
	    vueWaterfallEasy
	  },
	  methods: {
	    getData() {
	    	var _this=this;
	        _this.$http.get('../../static/data/flshow.json?group=' + _this.group)
	        .then(function(res){
	          _this.group++
	          if (_this.group === 10) {
	            _this.$refs.waterfall.waterfallOver()
	            return
	          }
	          _this.imgsArr = _this.imgsArr.concat(res.data)
	        })
	    },
	    clickFn(event, { index, value }) {
	      if (event.target.tagName.toLowerCase() == 'img') {
	      }
	    },
	    pullDownMove(pullDownDistance) {
	      this.pullDownDistance = pullDownDistance
	    },
	    pullDownEnd(pullDownDistance) {
	      //console.log('pullDownEnd')
	      if(this.pullDownDistance>50){
	        alert('下拉刷新')
	      }
	      this.pullDownDistance = 0
	    },
	  },
	  created() {
	    this.getData()
	  },
	}
</script>